import React, { useRef } from 'react'
import Fuyong from '../imageConfuyong'
import './home.css'
const Index: React.FC = () => {
    const containerRef = useRef<HTMLDivElement>(null);

    const scrollLeft = () => {
        if (containerRef.current) {
            containerRef.current.scrollBy({ left: -300, behavior: 'smooth' });
        }
    };

    const scrollRight = () => {
        if (containerRef.current) {
            containerRef.current.scrollBy({ left: 300, behavior: 'smooth' });
        }
    };

    return (
        <div>
            <div className="imageConImgtops1" style={{ paddingTop: '20px' }}>
                <button onClick={scrollLeft} className="imageConImgbtn1">←</button>
                <div className="imageConImgnei1" ref={containerRef}>
                    {/* 在这里添加内容，例如多个图片或列表项 */}
                    <div className="imageConImgitem1">
                        <img src="//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/8bbb3338-0bf1-4840-89b7-a6d2c583f1cc" alt="" />
                    </div>
                    <div className="imageConImgitem1">
                        <img src="//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/ce491dfa-281f-466f-aaed-29462c3e86a7" alt="" />
                    </div>
                    <div className="imageConImgitem1">
                        <img src="//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/c6936abf-c737-4e72-be1a-a3e79adca37c" alt="" />
                    </div>
                    <div className="imageConImgitem1">
                        <img src="//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/6ec96600-b00e-4d54-9f0a-ecf71a5f5485" alt="" />
                    </div>
                    <div className="imageConImgitem1">
                        <img src="//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/03/15/cd80f3ef-3420-426d-a1ce-e50caaf0e3c1" alt="" />
                    </div>
                    <div className="imageConImgitem1">
                        <img src="//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/03/15/ae13a819-f251-4f75-b385-87c6e500de68" alt="" />
                    </div>
                    <div className="imageConImgitem1">
                        <img src="//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/3e6a2a64-03c4-4745-bdca-38b7cdc9d8c4" alt="" />
                    </div>
                    <div className="imageConImgitem1">
                        <img src="//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/03/15/5d25e2e2-d669-42e1-8b61-72e7fd497d71" alt="" />
                    </div>
                </div>
                <button onClick={scrollRight} className="imageConImgbtn1">→</button>
            </div>
            <div className="imageConImgmains">
                <div>
                    <h2>为你推荐</h2>
                    <div>
                        <img src="https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2155516331.jpg?uid=364&timestamp=1726648042&sign=40a34a1c2cee0d813a1440a9f3729566&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        <img src="https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2068645087.jpg?uid=364&timestamp=1726648042&sign=40a34a1c2cee0d813a1440a9f3729566&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        <img src="https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2068643533.jpg?uid=364&timestamp=1726648042&sign=40a34a1c2cee0d813a1440a9f3729566&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        <img src="https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2068643533.jpg?uid=364&timestamp=1726648042&sign=40a34a1c2cee0d813a1440a9f3729566&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        <img src="https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2068647192.jpg?uid=364&timestamp=1726648042&sign=40a34a1c2cee0d813a1440a9f3729566&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        <img src="https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2068644052.jpg?uid=364&timestamp=1726648042&sign=40a34a1c2cee0d813a1440a9f3729566&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        <img src="https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2068646140.jpg?uid=364&timestamp=1726648042&sign=40a34a1c2cee0d813a1440a9f3729566&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        <img src="https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2155516331.jpg?uid=364&timestamp=1726648042&sign=40a34a1c2cee0d813a1440a9f3729566&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        <img src="https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2068644052.jpg?uid=364&timestamp=1726648042&sign=40a34a1c2cee0d813a1440a9f3729566&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                        <img src="https://photo-static-api.fotomore.com/creative/vcg/400/new/VCG41N2155428291.jpg?uid=364&timestamp=1726648042&sign=40a34a1c2cee0d813a1440a9f3729566&imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" />
                    </div>
                    <button className='geng'>更多图片</button>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
            </div>
        </div>

    );
}

export default Index